<template>
  <div class="signature" >
    <div @click.stop="true" style="width: 100%;">
  
      <vue-signature-pad  ref="signaturePad" :customStyle="{backgroundColor:backgroundColor}" :options="options"  height="200px"></vue-signature-pad>

    </div>
    <div class="tools">
      <p class="clear_a tool-item" @click="clearSignature"><img :src="czPng" alt=""> 清除签名</p>
    <p class="tool-item" @click="saveSignature"> 
      <img :src="confirmPng" alt="">
      确认</p>
    <p @click="backStep" class="tool-item">
      <img :src="backPng" alt="">
     上一步</p>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { VueSignaturePad } from 'vue-signature-pad';
import { ref, reactive, watch ,onMounted, PropType, computed} from 'vue';
import czPng from '../../../../assets/imgs/cz.png'
import confirmPng from '../../../../assets/imgs/confirm.png'
import backPng from '../../../../assets/imgs/back.png'
let emit =defineEmits(['update:modelValue']);
let props = defineProps({
  modelValue: {
    type: Object as PropType<{
      dotData:Array<any>, // 将签名处理成点数据
      base64ImgData:string // 将签名处理成base64图片数据
    }>,
  }, 
  dotSize: {
    type: Number,
    default: 0.5,
  },
  penColor: {
    type: String,
    default: 'black',
  },
  backgroundColor: {
    type: String,
    default: 'rgba(0,0,0,0)',
  }
})

const signaturePad = ref();
const options = computed(()=>{
  let baseOptions = {
    // minWidth: 2,
    // maxWidth: 2,
  }
  return {
    ...baseOptions,
    dotSize: props.dotSize,
    penColor: props.penColor,

  }
});

function dotDataParseSignature(dotData:Array<any>){

  if(dotData!.length>0){
    signaturePad.value.fromData(dotData)
 }
}

 onMounted(() => {
  let imgData =props.modelValue?.dotData||[]
  dotDataParseSignature(imgData)// 初始化签名 将点数据转换成签名
 })


// 清除签名
const clearSignature = () => {

  // 直接清空
  signaturePad.value.clearSignature();
};
 
    // 撤销返回上一步
function backStep(){

  signaturePad.value.undoSignature();
}

// 保存
const saveSignature = () => {
  // if (response.isEmpty) {
  //   return response;
  // } else {
  //   // 转成二进制形式
  //   const binaryData = convertBase64ToBinary(response.data);
  //   const blob = new Blob([binaryData], { type: 'image/png' });
  //   // console.log('+子组件43+', blob)
  //   return blob;
  // }
  let imgDotData = signaturePad.value.toData()

  let  imgBase64Data = signaturePad.value.saveSignature();
  emit('update:modelValue',{
    dotData:imgDotData,
    base64ImgData:imgBase64Data
  })
};
 

// 将Base64字符串转换为二进制数据
function convertBase64ToBinary(base64Str) {
  // 去除data:image/png;base64,这部分，只保留Base64编码的字符串
  const base64Data = base64Str.split(',')[1];
  // 使用atob函数解码Base64字符串
  const binaryStr = atob(base64Data);
  // 创建一个Uint8Array来保存二进制数据
  const len = binaryStr.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryStr.charCodeAt(i);
  }
  // 返回Uint8Array对象，或者根据需要进一步处理
  return bytes;
}
 
 

</script>
 
<style lang="less" scoped>
.signature {

  border-radius: 5px;
  width: 100%;

}
.tools{
  width:100%;
  display: flex;
  margin-top: 10px;

}
.tool-item{
  margin-right: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  img{
    width: 15px;
    margin-right: 5px;
  }
}
.clear_a {
 

  right: 15px;
  bottom: 10px;
}
</style>